/*
 * 新增设备入库
 * @Author: LuoQianJun
 * @Date: 2018-03-31 17:53:51
 * @Last Modified by: ljb
 * @Last Modified time: 2019-06-11 14:15:51
 */
<style lang="less" rel="stylesheet/less" type="text/less">
    .v-admin-equipment-create {
		overflow-y: scroll;
		&::-webkit-scrollbar {
			display: none;
		}
        .equipment-form {
            width: 380px;
        }
        .ivu-radio-group {
            margin: 0 0 20px 4.16666667%;
		}
		.ivu-row-flex-start {
			height: 500px;
		}

    }

</style>
<template>
	<div class="v-admin-equipment-create">

		<RadioGroup v-model="add_type">
			<Radio :label="$t('equipment.new')"/>
			<Radio :label="$t('equipment.existing')"/>
		</RadioGroup>

		<Row
			v-show="is_new_add"
			type="flex"
			justify="start">
			<i-col push="1">
				<Form
					ref="formValidate"
					:model="formValidate"
					:rules="ruleValidate"
					:label-width="labelWidth(120,170)"
					name="create-form">

					<Form-item
						:label="$t('equipment.device_spec')"
						prop="spec_id">
						<Select
							v-model="formValidate.spec_id"
							name="create-spec_id"
							clearable
							filterable
							transfer>
							<Option
								v-for="( value , key ) in deviceSpecs"
								:value="value.id + ''"
								:key="key">{{ value.code }}</Option>
						</Select>
					</Form-item>

					<Form-item
						:label="$t('equipment.code')"
						prop="code">
						<i-input
							v-model="formValidate.code"
							:placeholder="$t('equipment.please_select_uuid')"
							name="create-code"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('equipment.device_name')"
						prop="device_name">
						<i-input
							v-model="formValidate.device_name"
							:placeholder="$t('equipment.please_enter_device_name')"
							name="create-device_name"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('equipment.sku')"
						prop="sku">
						<InputNumber
							:min="1"
							v-model="formValidate.sku"
							:placeholder="$t('equipment.please_select_sku')"
							name="create-sku"/>
					</Form-item>

					<Form-item
						:label="$t('equipment.specification')"
						prop="specification">
						<i-input
							v-model="formValidate.specification"
							:placeholder="$t('equipment.please_enter_spec')"
							name="create-specification"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('equipment.producer')"
						prop="producer">
						<i-input
							v-model="formValidate.producer"
							:placeholder="$t('equipment.please_enter_producer')"
							name="create-producer"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('equipment.buyer')"
						prop="buyer">
						<i-input
							v-model="formValidate.buyer"
							:placeholder="$t('equipment.please_enter_buyer')"
							name="create-buyer"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('equipment.purchase_at')"
						prop="purchase_at">
						<DatePicker
							v-model="formValidate.purchase_at"
							:style="{width: '260px'}"
							:placeholder="$t('equipment.please_select_date')"
							type="datetime"
							placement="top"
							name="create-purchase_at"
							@on-change="changeDate"/>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('formValidate')">
							{{ $t('common.submit') }}
						</Button>
						<Button
							type="ghost"
							style="margin-left: 8px"
							@click="handleReset('formValidate')">
							{{ $t('common.reset') }}
						</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>

		<Row
			v-show="!is_new_add"
			type="flex"
			justify="start">
			<i-col>
				<Form
					ref="storeBuyValidate"
					:model="storeBuyValidate"
					:rules="storeBuyRuleValidate"
					:label-width="labelWidth(120,170)"
					class="equipment-form"
					name="not_new_form">

					<Form-item
						:label="$t('equipment.device_name')"
						prop="deviced_name">
						<Select
							v-model="storeBuyValidate.deviced_name"
							name="create-deviced_name"
							clearable
							filterable>
							<Option
								v-for="device in devices"
								:value="device.id + ''"
								:key="device.id">{{ device.device_name }}</Option>
						</Select>
					</Form-item>

					<Form-item
						:label="$t('equipment.buyer')"
						prop="buyer">
						<i-input
							v-model="storeBuyValidate.buyer"
							:placeholder="$t('equipment.please_enter_buyer')"
							name="create-buyer"
							type="text"/>
					</Form-item>

					<Form-item
						:label="$t('equipment.sku')"
						prop="sku">
						<InputNumber
							:max="100"
							:min="1"
							v-model="storeBuyValidate.sku"
							:placeholder="$t('equipment.please_select_sku')"
							name="create-sku"/>
					</Form-item>

					<Form-item
						:label="$t('equipment.purchase_at')"
						prop="purchase_at">
						<DatePicker
							v-model="storeBuyValidate.purchase_at"
							:style="{width: '260px'}"
							:placeholder="$t('equipment.please_select_date')"
							placement="bottom"
							name="create-purchase_at"
							type="datetime"
							@on-change="changeDate"/>
					</Form-item>

					<Form-item>
						<Button
							type="primary"
							@click="handleSubmit('storeBuyValidate')">
							{{ $t('common.submit') }}
						</Button>
						<Button
							type="ghost"
							style="margin-left: 8px"
							@click="handleReset('storeBuyValidate')">
							{{ $t('common.reset') }}
						</Button>
					</Form-item>

				</Form>
			</i-col>
		</Row>
	</div>
</template>

<script>

import labelWidthMixin from 'src/views/mixins/labelWidthMixin'; // 引入mixins文件

export default {
	name: 'EquipmentCreate',
	mixins: [labelWidthMixin],
	props: {
		skinDetectors: {
			type: Object,
			default() {
				return {};
			},
		},
		devices: {
			type: Array,
			default() {
				return [];
			},
		},
		deviceSpecs: {
			type: Array,
			default() {
				return [];
			},
		},
	},

	data() {
		return {
			formValidate: {
				code: '', // 设备型号

				device_name: '', // 设备名称

				sku: 1, // 入库数量

				specification: '', // 规格

				producer: '', // 生产商

				buyer: '', // 入库人

				purchase_at: '', // 入库

				spec_id: '1', // 试妆参数
			}, // 入库

			storeBuyValidate: {
				deviced_name: '', // 设备名称

				buyer: '', // 入库人

				purchase_at: '', // 入库日期

				sku: 1, // 入库数量
			}, // 已有入库

			real_date: '', // 格式化后的时间

			add_type: '', // 选择入库的类型（入库||已有入库）

			is_new_add: false, // 显示哪个表单

			storeBuyRuleValidate: { // 验证表单数据规则
				deviced_name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.device_name') }),
						trigger: 'blur,change',
					},
				],
				sku: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('equipment.sku') }),
						trigger: 'blur,change',
					},
				],
				buyer: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.buyer') }),
						trigger: 'blur,change',
					},
				],
				purchase_at: [
					{
						required: true,
						type: 'date',
						message: this.$t('validate.required', { field: this.$t('equipment.purchase_at') }),
						trigger: 'blur,change',
					},
				],
			},

			ruleValidate: { // 验证表单数据规则
				code: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.code') }),
						trigger: 'blur,change',
					},
				],
				spec_id: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.device_spec') }),
						trigger: 'blur,change',
					},
				],
				device_name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.device_name') }),
						trigger: 'blur,change',
					},
				],
				sku: [
					{
						required: true,
						type: 'number',
						message: this.$t('validate.required', { field: this.$t('equipment.sku') }),
						trigger: 'blur,change',
					},
				],
				specification: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.specification') }),
						trigger: 'blur,change',
					},
				],
				producer: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.producer') }),
						trigger: 'blur,change',
					},
				],
				buyer: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('equipment.buyer') }),
						trigger: 'blur,change',
					},
				],
				purchase_at: [
					{
						required: true,
						type: 'date',
						message: this.$t('validate.required', { field: this.$t('equipment.purchase_at') }),
						trigger: 'blur,change',
					},
				],
			},

		};
	},

	watch: {

		add_type() {
			if (!this.add_type) return;

			switch (this.add_type) {
			case this.$t('equipment.new'): // 入库
				this.handleReset('formValidate');
				this.is_new_add = true;

				break;
			case this.$t('equipment.existing'): // 已有入库
				this.handleReset('storeBuyValidate');
				this.is_new_add = false;

				break;
			default:

				break;
			}
		},

	},

	mounted() {
		this.add_type = this.$t('equipment.new');
	},

	methods: {
		/**
         * 时间选择器改变的回调
         * @param  {string} date {格式化后的时间}
         * @return {undefined}
         */
		changeDate(date) {
			this.real_date = date;
		},

		/**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleReset(name) {
			this.$refs[name].resetFields();
		},


		/**
         * 提交表单
         * @param  {string} name {表单上的ref值}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.formDataCreate();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 手动拼接表单数据
		 * @param {new_object} {拼接表单对象}
         * @return {undefined}
         */
		formDataCreate() {
			if (this.is_new_add) {
				const new_object = {
					device_code: this.formValidate.code,

					device_spec_id: this.formValidate.spec_id,

					device_name: this.formValidate.device_name,

					sku: this.formValidate.sku,

					specification: this.formValidate.specification,

					producer: this.formValidate.producer,

					buyer: this.formValidate.buyer,

					purchase_at: this.real_date,
				};

				const form_data = new FormData();

				Object.keys(new_object).forEach((key) => {
					form_data.append(key, new_object[key]);
				});

				this.$emit('postStore', form_data);
			} else {
				const new_object = {
					deviced_name: this.storeBuyValidate.deviced_name,

					sku: this.storeBuyValidate.sku,

					buyer: this.storeBuyValidate.buyer,

					purchase_at: this.real_date,
				};

				const form_data = new FormData();

				Object.keys(new_object).forEach((key) => {
					form_data.append(key, new_object[key]);
				});

				this.$emit('postStoreBuy', form_data);
			}
		},


	},
};
</script>
